<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 22:15:58
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-card class="title-card" shadow="always">
      <div class="card-item">
        账户:<el-input
          v-model="formInline.user"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
        邮箱:<el-input
          v-model="formInline.email"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
        角色:<el-select
          v-model="formInline.meta"
          class="m-2"
          placeholder="Select"
          size="large"
          style="margin-right: 10px"
        >
          <el-option
            v-for="(item, index) in option1"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        状态:<el-select
          v-model="formInline.state"
          class="m-2"
          placeholder="Select"
          size="large"
          style="margin-left: 10px"
        >
          <el-option
            v-for="(item, index) in option2"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button @click="res">重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div v-if="multipleSelection.length">
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认删除这个文章？"
          @confirm="chooseDeleteArticleLists"
        >
          <template #reference>
            <el-button plain type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="username" label="账户" width="130" />
        <el-table-column prop="email" label="邮箱" width="130" />
        <el-table-column prop="meta" label="角色" width="130">
          <template #default="scope">
            <span v-if="scope.row.meta === 'TC'">管理员</span>
            <span v-if="scope.row.meta === 'USER'">访客</span>
          </template>
        </el-table-column>

        <el-table-column prop="state" label="状态" width="180">
          <template #default="scope">
            <div v-if="scope.row.state === 'true'">
              <span
                style="
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  background: green;
                  border-radius: 100%;
                "
              ></span>
              <span> 可用</span>
            </div>
            <div v-else-if="scope.row.state === 'false'">
              <span
                style="
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  background: red;
                  border-radius: 100%;
                "
              ></span>
              <span>已锁定</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="250" />
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <!-- 禁用启用 -->
            <div @click="disableBtn(scope.row)">
              <el-button
                v-if="scope.row.state == 'true'"
                link
                type="primary"
                size="small"
                >禁用</el-button
              >
              <el-button
                v-else-if="scope.row.state == 'false'"
                link
                type="primary"
                size="small"
                >启用</el-button
              >
            </div>
            <!--  -->
            <div @click="authorization(scope.row)">
              <el-button
                v-if="scope.row.meta == 'TC'"
                link
                type="primary"
                size="small"
                >解除授权</el-button
              >
              <el-button
                v-else-if="scope.row.meta == 'USER'"
                link
                type="primary"
                size="small"
                >授权</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- {{user.email}} -->
  </div>
</template>

<script>
import { ElMessage, InfoFilled } from "element-plus";

import { mapMutations } from "vuex";
// 获取后端数据
import {
  asyncUserLists,
  asyncDeleteUserLists,
  asyncChooseDeleteUserLists,
  asyncSetStateUser,
  // asyncPublish,
  // asyncDraft,
} from "../api/user";
import { RefreshLeft } from "@element-plus/icons-vue";
export default {
  components: {
    RefreshLeft,
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      // 多选数组
      multipleSelection: [],
      //   文章数据
      tableData: [],
      isHidden: false,
      formInline: {
        user: "",
        email: "",
        state: "",
        meta: "",
      },
      option1: ["管理员", "访客"],
      option2: ["可用", "已锁定"],
    
      // 新建还是添加
      pageCode: 1,
      pageSize: 4,
      total: 0,
    };
  },
  created() {
    this.init();
    this.getUserLists();
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
    },
    // 请求数据方法
    async getUserLists() {
      // 状态
      console.log(4444);
      let flag = "";
      if (this.formInline.state == "可用") {
        flag = "true";
      } else if (this.formInline.state == "已锁定") {
        flag = "false";
      }
      // 角色
      let auth = "";
      console.log(this.formInline.meta, "vvvvv");
      if (this.formInline.meta == "管理员") {
        auth = "TC";
        console.log(111);
      } else if (this.formInline.meta == "访客") {
        auth = "USER";
        console.log(2222);
      }
      // console.log(auth,'ghghgmmm')
      // console.log("--------------")
      const res = await asyncUserLists("/userLists", {
        pageCode: this.pageCode,
        pageSize: this.pageSize,
        user: this.formInline.user,
        email: this.formInline.email,
        meta: auth,
        state: flag,
      });
      console.log(res);
      this.tableData = res.data.results;
      this.total = res.data.total;
    },
    // 删除
    async handleDelete(row) {
      const res = await asyncDeleteUserLists("/deleteUserLists", {
        id: row.id,
      });
      this.getUserLists();
      if (res.data.code === 200) {
        this.getArticleLists();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    },
    // 禁用
    async disableBtn(row) {
      console.log(row);
      console.log(11);
      const res = await asyncSetStateUser("/setState", {
        id: row.id,
        state: row.state,
      });
      // console.log(res,'lklklklk')
      if (res.data.code === 200) {
        ElMessage({
          message: "禁用成功",
          type: "success",
        });
        this.getUserLists();
      }
    },
    // 解除禁用
   async authorization(row) {
      console.log(row);
       const res = await asyncSetStateUser("/authorization", {
        id: row.id,
        meta: row.meta,
      });
      // console.log(res,'lklklklk')
      if (res.data.code === 200) {
        ElMessage({
          message: "授权成功",
          type: "success",
        });
        this.getUserLists();
      }
      
    },
    // 选中
    handleSelectionChange(val) {
      // 多选删除
      this.multipleSelection = val;
    },
    // 多选删除
    async chooseDeleteArticleLists() {
      const res = await asyncChooseDeleteUserLists("/fileDelete", {
        multipleSelection: this.multipleSelection,
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      });
      this.getUserLists();
    },
    // 发布
    // async publish() {
    //   const res = await asyncPublish("/publish", {
    //     multipleSelection: this.multipleSelection,
    //   });
    //   if (res.data.code === 200) {
    //     this.getArticleLists();
    //     ElMessage({
    //       message: "操作成功",
    //       type: "success",
    //     });
    //   }
    // },
    // 草稿
    // async Draft() {
    //   const res = await asyncDraft("/draft", {
    //     multipleSelection: this.multipleSelection,
    //   });
    //   if (res.data.code === 200) {
    //     this.getArticleLists();
    //     ElMessage({
    //       message: "操作成功",
    //       type: "success",
    //     });
    //   }

    // },
    searchChange() {
      this.getUserLists();
    },
    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getUserLists();
    },
    handleCurrentChange(val) {
      this.pageCode = val;
      console.log(val);
      this.getUserLists();
    },
    //重置
    res(){
      // formInline: {
      //   user: "",
      //   email: "",
      //   state: "",
      //   meta: "",
      // },
      this.formInline.user=''
      this.formInline.email=''
      this.formInline.state=''
      this.formInline.meta=''
      this.getUserLists();
    }
  },
};
</script>
<style>
.title-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>